<template>
	<page-header title="活动详情" background="#F7F0E6"></page-header>
	<view class="box">
		<view class="header">
			<uni-swiper-dot :info="imgArray" :dots-styles="dotsStyles" mode="dot">
				<swiper class="swiper">
					<swiper-item v-for="(item, index) in imgArray" :key="index">
						<view class="swiper-item">
							<image mode="aspectFit" :src="item" @tap="preview(index)"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="body">
			<view class="title">{{ Data.title }}</view>
			<view class="content">
				<rich-text :nodes="Data.content" />
			</view>
			<view class="time">{{ Data.createTime }}</view>
			<view class="button" v-if="Data.linkUrl" @tap="gotoLinkUrl(Data.linkUrl)">立即领取</view>
		</view>
		<view class="comment">
			<view class="total">共 {{ CommentData.length }} 条评论</view>
			<view class="item" v-for="item in CommentData" :key="item.commentId">
				<image class="avatar" :src="item.pic || '../../static/img/avatar.png'"></image>
				<view class="group">
					<view class="name">{{ item.nickName }}</view>
					<view class="content">{{ item.content }}</view>
					<view class="time">时间未知</view>
				</view>
			</view>
		</view>
	</view>
	<view class="tabbar">
		<uni-icons type="compose" size="25"></uni-icons>
		<input placeholder="说点什么呢" class="input" confirm-type="send" type="text" v-model.trim="inputContent"
			@confirm="addComment">
		<view class="icon">
			<uni-icons type="heart" size="25" v-if="!haveHandup" @tap="handup()"></uni-icons>
			<uni-icons type="heart-filled" size="25" color="#FF2E4D" v-else @tap="alreadyHandup()"></uni-icons>
			{{ Data.like | 0 }}
		</view>
		<view class="icon">
			<uni-icons type="star" size="25" v-if="!haveCollection" @tap="collection()"></uni-icons>
			<uni-icons type="star-filled" size="25" color="#FBBD56" v-else @tap="cancelCollection()"></uni-icons>
			{{ Data.favor | 0 }}
		</view>
		<!-- <view class="icon" @tap="scrollComment">
			<uni-icons type="chat" size="25"></uni-icons>
			{{CommentData.length}}
		</view> -->
		<view class="icon">
			<uni-icons type="eye" size="25"></uni-icons>
			{{ Data.view | 0 }}
		</view>
	</view>
</template>

<script setup>
	import {
		onShareTimeline,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const scrollComment = () => {
		uni.pageScrollTo({
			selector: '.comment', //你要跳转的样式位置
			duration: 300, //跳转时间段
		})
	}
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad((options) => {
		postId.value = options.id
		getDeatil()
		getComment()
	})
	onShow(() => {
		if (uni.getStorageSync("cloudToken")) {
			judgeCollection()
			judgeHandup()
		}
	})
	const CommentData = ref([])
	/**
	 * 获取帖子评论
	 */
	const getComment = () => {
		uni.showLoading()
		http.request({
			url: '/mall4cloud_point/ua/getComment?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			CommentData.value = res
			uni.hideLoading()
		})
	}
	const goToSection = (url) => {
		var arr = url.split("section://")
		uni.navigateTo({
			url: "/pages/activity-zone/activity-zone?index=" + arr[1]
		})

	}
	const inputContent = ref('')
	const addComment = () => {
		if (inputContent.value == '') {
			uni.showToast({
				title: "内容不能为空",
				icon: 'none',
				duration: 1000
			})
			return
		}
		uni.showLoading()
		http.request({
			url: "/mall4cloud_point/u/addComment",
			method: 'POST',
			data: {
				"postId": postId.value,
				"content": inputContent.value
			}
		}).then((res) => {
			uni.hideLoading()
			uni.showToast({
				title: "留言成功,审核通过后将显示",
				icon: 'none',
				duration: 1000
			})
			inputContent.value = ''
		})
	}
	const postId = ref(null)
	const imgArray = ref([])
	const haveHandup = ref(false)
	const haveCollection = ref(false)
	const collectionArr = ref([])
	const dotsStyles = ref({
		backgroundColor: '#CCCCCC',
		border: '1px #C9C9C9 solid',
		selectedBackgroundColor: '#FF2442',
		selectedBorder: '1px #D6364B solid'
	})
	const Data = ref({})
	/**
	 * 获取帖子详情
	 */
	const getDeatil = () => {
		uni.showLoading()
		http.request({
			url: '/mall4cloud_point/ua/post/detail?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			Data.value = res
			Data.value.content = util.formatHtml(Data.value.content)
			imgArray.value = Data.value.files.map(item => {
				return item.fileUrl
			})
			uni.hideLoading()
		})
	}
	/**
	 * 预览图片
	 */
	const preview = (index) => {
		uni.previewImage({
			urls: imgArray.value,
			current: index
		})
	}
	/**
	 * 判断是否收藏
	 */
	const judgeCollection = () => {
		let arr = uni.getStorageSync("collection");
		collectionArr.value = arr
		for (var i = 0; i < arr.length; i++) {
			if (arr[i] == postId.value) {
				haveCollection.value = true
				break;
			}
		}
	}
	/**
	 * 判断是否点赞
	 */
	const judgeHandup = () => {
		http.request({
			url: '/mall4cloud_point/u/post/isLike?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			haveHandup.value = res
		}).catch((err) => {})
	}
	/**
	 * 点赞该文章
	 */
	const handup = () => {
		http.request({
			url: '/mall4cloud_point/u/post/like?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			uni.showToast({
				title: "点赞成功",
				icon: 'none',
				duration: 1000
			})
			haveHandup.value = true
			Data.value.like++;
		}).catch((err) => {})
	}
	/**
	 * 已经点赞后的操作
	 */
	const alreadyHandup = () => {
		uni.showToast({
			title: "不能重复点赞哦",
			icon: 'none',
			duration: 1000
		})
	}
	/**
	 * 收藏该文章
	 */
	const collection = () => {
		http.request({
			url: '/mall4cloud_point/u/post/favor?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			haveCollection.value = true
			collectionArr.value.push(postId.value)
			uni.setStorageSync("collection", collectionArr.value)
			Data.value.favor++
			uni.showToast({
				title: "收藏成功",
				icon: 'none',
				duration: 1000
			})
		}).catch((err) => {})
	}
	/**
	 * 取消收藏该文章
	 */
	const cancelCollection = () => {
		http.request({
			url: '/mall4cloud_point/u/post/unfavor?postId=' + postId.value,
			method: 'GET',
		}).then((res) => {
			haveCollection.value = false
			collectionArr.value = collectionArr.value.filter(item => item != postId.value)
			uni.setStorageSync("collection", collectionArr.value)
			Data.value.favor--
			uni.showToast({
				title: "取消收藏成功",
				icon: 'none',
				duration: 1000
			})
		}).catch((err) => {})
	}
	/**
	 * 跳转LinkUrl
	 */
	const gotoLinkUrl = (url) => {
		if (url == null || url == undefined) return
		const arr = String(url).split("://")
		switch (arr[0]) {
			case 'communitySection':
				uni.switchTab({
					url: '/pages/activity-community/activity-community'
				})
				break;
			case 'activitySection':
				uni.navigateTo({
					url: '/pages/activity-zone/activity-zone?navIndex=' + arr[1]
				})
				break;
			case 'post':
				uni.navigateTo({
					url: '/pages/activity-detail/activity-detail?id=' + arr[1]
				})
				break;
			case 'product':
				uni.navigateTo({
					url: '/pages/shop-detail/shop-detail?spuId=' + arr[1]
				})
				break;
			case 'coupon':
				http.request({
					url: '/mall4cloud_point/app/coupon/get',
					data: {
						couponId: arr[1]
					},
					method: 'POST',
				}).then((res) => {
					uni.showToast({
					  title: res,
					  icon: 'none',
					  mask: true
					})
				}).catch((err) => {
					uni.showToast({
					  title: '领取失败',
					  icon: 'none',
					  mask: true
					})
				})
				break;
		}
	}
</script>

<style lang="scss" scoped>
	@use 'activity-detail';
</style>
